<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<!-- Metas -->
		<title>curtains.js | Download</title>
	    <meta name="description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
	    <link rel="canonical" href="https://www.curtainsjs.com/download.html">

	    <!-- Facebook OG -->
	    <meta property="og:title" content="curtains.js | Download">
	    <meta property="og:type" content="website">
	    <meta property="og:description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
	    <meta property="og:url" content="https://www.curtainsjs.com/download.html">
	    <meta property="og:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

	    <!-- Twitter card -->
	    <meta name="twitter:card" content="summary_large_image">
	    <meta name="twitter:site" content="@martinlaxenaire">
		<meta name="twitter:creator" content="@martinlaxenaire">
		<meta name="twitter:title" content="curtains.js | Download">
		<meta name="twitter:description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
		<meta name="twitter:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

		<!-- Favicon -->
		<link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="images/favicons/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="16x16" href="images/favicons/favicon-16x16.png">
		<link rel="manifest" href="images/favicons/site.webmanifest">
		<link rel="mask-icon" href="images/favicons/safari-pinned-tab.svg" color="#202340">
		<link rel="shortcut icon" href="images/favicons/favicon.ico">
		<meta name="msapplication-TileColor" content="#202340">
		<meta name="msapplication-config" content="images/favicons/browserconfig.xml">
		<meta name="theme-color" content="#202340">

		<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
        <div id="page-wrap">

			<div id="canvas"></div>

			<div id="content">

				<header id="header">
					<div class="wrapper">
						<div id="header-wrapper" class="flex-wrapper">
							<div id="header-title">
								<a href="/" title="Home">curtains.js</a>
							</div>
							<nav id="main-menu">
								<ul class="flex-wrapper">
									<li>
										<a href="get-started.html">Get started</a>
									</li>
									<li>
										<a href="documentation.html">Docs</a>
									</li>
									<li>
										<a href="download.html" class="active">Download</a>
									</li>
								</ul>
							</nav>
						</div>
					</div>
				</header>

				<section class="content-section">

					<div class="text-section">
						<h1>Download</h1>
					</div>

					<div class="text-section inner-section">
                        <p>
                            <a href="dist/curtains.umd.js" id="download-full-lib-link" download target="_blank" title="download curtains.js v8.1">curtains.umd.js v8.1 (346Ko)</a> - <a href="dist/curtains.umd.min.js" id="download-min-lib-link" download target="_blank" title="download curtains.umd.min.js v8.1">curtains.umd.min.js v8.1 (122Ko)</a> - <a href="https://github.com/martinlaxenaire/curtainsjs" title="curtains.js on Github" target="_blank">Github</a>.
                        </p>
					</div>

					<div id="about" class="text-section inner-section">
						<div class="about-curtain" data-vs-id="about-vs" data-fs-id="about-fs">
							<img data-sampler="aboutSampler" src="images/intro-background.jpg" />
						</div>
					</div>



					<div class="text-section inner-section">
						<h2>Changelog</h2>
                        <h3>Version 7.0</h3>
                        <p>
                            Version 7.0 has been totally rewritten using ES6 class modules to improve readability and maintainability. It will also enable the ability to tree shake the library when packing your production builds (i.e. not including unused classes in your final build).
                        </p>
                        <p>
                            There are very few breaking changes, however you should still have a look at the <a href="migration-guide-to-v7.html">migration guide</a> and the updated <a href="documentation.html">documentation</a>.
                        </p>
                        <ul>
                            <li>
                                Broken into multiple modules. <strong>addPlane()</strong>, <strong>addRenderTarget()</strong> and <strong>addShaderPass()</strong> are deprecated and you should use the class constructors now instead (i.e. <strong>new Plane()</strong>, <strong>new RenderTarget()</strong>, <strong>new ShaderPass()</strong>).<br />
                                Following this logic, <strong>removePlane()</strong>, <strong>removeRenderTarget()</strong> and <strong>removeShaderPass()</strong> are also deprecated, you should now use the <strong>remove()</strong> methods of those classes.
                            </li>
                            <li>
                                Textures have been greatly improved, with the ability to preload medias thanks to the <a href="texture-loader-class.html">TextureLoader class</a>. You can also set each texture parameters now, like <strong>minFilter</strong>, <strong>magFilter</strong>, <strong>wrapS</strong>, <strong>wrapT</strong>, <strong>premulitplyAlpha</strong>, <strong>anisotropy</strong>, use floating point textures, etc.
                            </li>
                            <li>
                                Introducing math classes for vectors, matrix and quaternion calculations: <a href="vec-2-class.html">Vec2</a>, <a href="vec-3-class.html">Vec3</a>, <a href="mat-4-class.html">Mat4</a> and <a href="quat-class.html">Quat</a> classes.
                            </li>
                            <li>
                                Added a few useful extras classes as well: <a href="ping-pong-plane-class.html">PingPongPlane</a> and <a href="fxaa-pass-class.html">FXAAPass</a>. Hopefully there will be more to come.
                            </li>
                        </ul>
                        <h3>Version 6.0</h3>
                        <p>
                            Version 6.0 has a totally renewed way to handle perspective using a real perspective camera approach for each plane. Modifying the field of view will now have a much greater impact on the perceived perspective.
                        </p>
                        <ul>
                            <li>
                                New way to handle perspective.
                            </li>
                            <li>
                                Improved planes rotation (using Euler angles with "XYZ" as axis order). Also, planes now have a transform origin Z property as well.
                            </li>
                            <li>
                                Introducing <a href="plane-class.html#cull-face">face culling</a> for each plane.
                            </li>
                            <li>
                                Planes, shader passes, render targets and textures now have a unique identifier (uuid) property.
                            </li>
                            <li>
                                Fixed <a href="plane-class.html#move-to-front">moveToFront()</a> method and minor bugs.
                            </li>
                        </ul>
                        <h3>Version 5.0</h3>
                        <p>
                            Version 5.0 introduces <a href="render-target-class.html">RenderTarget</a> class. It allows you to render any plane as a texture by setting it a render target. The <a href="shader-pass-class.html">ShaderPass</a> class now also use that class internally.<br>
                            It also now uses <strong>WebGL2</strong> whenever possible.<br />
                            As usual, there are no breaking changes so you can update safely to this version.
                        </p>
                        <ul>
                            <li>
                                New RenderTarget class.
                            </li>
                            <li>
                                New <a href="texture-class.html#set-from-texture">setFromTexture</a> method to copy a texture into another texture.
                            </li>
                            <li>
                                Planes now have a <a href="plane-class.html#transform-origin">transform origin</a> property that you can change anytime with the <a href="plane-class.html#set-transform-origin">setTransformOrigin</a> method.
                            </li>
                            <li>
                                Possibility to set the alpha and premultiplied alpha WebGL context options on init.
                            </li>
                            <li>
                                A lot of performance improvements by reducing the number of WebGL calls and bugs fixes.
                            </li>
                        </ul>
                        <h3>Version 4.0</h3>
                        <p>
                            Version 4.0 introduces optional native scroll handling (planes position are automatically updated when the users scrolls), but it also lets you define if you want to listen to the resize event or use the internal request animation frame loop. With those options you can chose to handle those things by yourself and therefore improve performance by keeping a single resize or request animation frame loop for your websites.<br />
                            The Curtains object now accepts an object as <a href="curtains-class.html#curtains-init-params">init params</a>.
                        </p>
                        <ul>
                            <li>
                                New Curtains object initial parameters with the ability to define which events you want to listen to.
                            </li>
                            <li>
                                A few new helper methods and event to handle scroll related things.
                            </li>
                            <li>
                                Real frustum culling to draw only the planes that actually need to be render. Comes with a handy <a href="plane-class.html#draw-check-margins">drawCheckMargins</a> parameter in case you are displacing vertices positions in your vertex shader.
                            </li>
                            <li>
                                Performance improvements and bugs fixes.
                            </li>
                        </ul>
                        <h3>Version 3.0</h3>
                        <p>
                            Version 3.0 introduces post processing effects and a few more helpers.<br />
                            There are no breaking changes since v2.0 so you can update it safely.
                        </p>
                        <ul>
                            <li>
                                Major code refactoring to introduce <a href="shader-pass-class.html">ShaderPass</a> class by creating a BasePlane class. Usual <a href="plane-class.html">Plane</a> class now extends BasePlane class, as does ShaderPass class.
                            </li>
                            <li>
                                Added a bunch of new events and methods, like <a href="plane-class.html#on-after-resize">onAfterResize</a> or <a href="plane-class.html#get-bounding-rect">getBoundingRect</a>.
                            </li>
                            <li>
                                Minor bugs fixes.
                            </li>
                        </ul>
						<h3>Version 2.0</h3>
						<ul>
							<li>
								Added a <a href="texture-class.html">Texture</a> class object and introduced texture matrices as well.
							</li>
							<li>
								Code structure refactored and cleaned.
							</li>
							<li>
								Internal maths and object properties have been rewritten for a cleaner and more readable code.
							</li>
							<li>
								Improved performance on both loading and rendering time.
							</li>
							<li>
								Minor bugs fixes.
							</li>
						</ul>
					</div>
					<div class="text-section inner-section">
						<h2>About</h2>
						<p>
							This library is released under the MIT license which means it is free to use for personnal and commercial projects.
						</p>
						<p>
							All images used in the examples were taken by <a href="https://marionbornaz.com/" title="Marion Bornaz" target="_blank">Marion Bornaz</a> during the <a href="https://www.miragefestival.com/" title="Mirage Festival" target="_blank">Mirage Festival</a>.
						</p>
						<p>
							All examples video footages were shot by <a href="https://analogueprod.com/" title="Analogue Production" target="_blank">Analogue Production</a>.
						</p>
						<p>
							Many thanks to <a href="https://webglfundamentals.org/" title="webglfundamentals.org" target="_blank">webglfundamentals.org</a> tutorials which helped me a lot.
						</p>
						<p>
							Author of this library is <a href="https://www.martin-laxenaire.fr/" title="Martin Laxenaire" target="_blank">Martin Laxenaire</a>, a french creative front-end developper based in Lyon.<br />
							Found a bug ? Have questions ? Do not hesitate to <a href="mailto:martin.laxenaire@gmail.com" title="contact me">email me</a>, <a href="https://github.com/martinlaxenaire/curtainsjs/issues" title="Fill an issue on Github">fill an issue on Github</a> or send me a tweet : <a href="https://twitter.com/martinlaxenaire" target="_blank" title="My twitter">@martinlaxenaire</a>.
						</p>
					</div>
				</section>
			</div>
		</div>


		<script id="about-vs" type="x-shader/x-vertex">
			precision mediump float;

			// default mandatory variables
			attribute vec3 aVertexPosition;
			attribute vec2 aTextureCoord;

			uniform mat4 uMVMatrix;
    		uniform mat4 uPMatrix;

			// custom variables
			varying vec3 vVertexPosition;
			varying vec2 vTextureCoord;

			uniform float uTime;

			void main() {

				vec3 vertexPosition = aVertexPosition;

				// get the distance between our vertex and the mouse position
				float distanceFromCenter = distance(vec2(0.0, 0.0), vec2(vertexPosition.x, vertexPosition.y));

				// calculate our wave effect
				float waveSinusoid = cos(5.0 * (distanceFromCenter - (uTime / 75.0)));

				// attenuate the effect based on mouse distance
				float distanceStrength = (0.4 / (distanceFromCenter + 0.4));

				// calculate our distortion effect
				float distortionEffect = distanceStrength * waveSinusoid * 2.0;

				// apply it to our vertex position
				vertexPosition.z +=  distortionEffect / 15.0;
				vertexPosition.x +=  (distortionEffect / 15.0 * (0.0 - vertexPosition.x)) * 1.5;
				vertexPosition.y +=  distortionEffect / 15.0 * (0.0 - vertexPosition.y);

			   	gl_Position = uPMatrix * uMVMatrix * vec4(vertexPosition, 1.0);

			   	// varyings
			   	vTextureCoord = aTextureCoord;
			   	vVertexPosition = vertexPosition;
			}
        </script>
		<script id="about-fs" type="x-shader/x-fragment">
			precision mediump float;

			uniform float uTime;

			varying vec3 vVertexPosition;
			varying vec2 vTextureCoord;

			uniform sampler2D aboutSampler;

			void main() {

				// apply our texture
				vec4 finalColor = texture2D(aboutSampler, vTextureCoord);

				// fake shadows based on vertex position along Z axis
				finalColor.rgb -= clamp(-vVertexPosition.z / 2.0, 0.0, 1.0);
				// fake lights based on vertex position along Z axis
				finalColor.rgb += clamp(vVertexPosition.z / 2.0, 0.0, 1.0);

				// handling premultiplied alpha (useful if we were using a png with transparency)
				finalColor = vec4(finalColor.rgb * finalColor.a, finalColor.a);

				gl_FragColor = finalColor;
			}
        </script>


		<script src="js/main.navigation.js" type="module"></script>


		<!-- Global site tag (gtag.js) - Google Analytics -->
		<script async src="https://www.googletagmanager.com/gtag/js?id=UA-141413267-1"></script>
		<script>
		  	window.dataLayer = window.dataLayer || [];
		  	function gtag(){dataLayer.push(arguments);}
		  	gtag('js', new Date());

		  	gtag('config', 'UA-141413267-1');
		</script>

		<script type="text/javascript">
			document.getElementById("download-full-lib-link").addEventListener("click", function() {
		        gtag('event', 'click', {
		            'event_category': 'engagement',
		            'event_label': 'Downloaded full lib',
		        });
		    });

			document.getElementById("download-min-lib-link").addEventListener("click", function() {
		        gtag('event', 'click', {
		            'event_category': 'engagement',
		            'event_label': 'Downloaded minified lib',
		        });
		    });
		</script>

	</body>
</html>
